<template>
  <div>
    <nav-header :list='titleList' />
    <nuxt class="middle" />
  <tar-bar :list='list'/>
  </div>
</template>
<script>
import navHeader from '~/components/navHeader'
var home = require('../assets/home.png')
var money = require('../assets/money.png')
var contact = require('../assets/contact.png')
var my = require('../assets/my.png')
var home_on = require('../assets/home-on.png')
var money_on = require('../assets/money-on.png')
var contact_on = require('../assets/contact-on.png')
var my_on = require('../assets/my-on.png')
import tarBar from '~/components/tarBar'
export default {
	components: {
		tarBar,
		navHeader
	},
	data() {
		return {
			list: [
				{ title: '首页', img: home, img1: home_on, select: 1 },
				{ title: '服务', img: money, img1: money_on, select: 0 },
				{ title: '朋友', img: contact, img1: contact_on, select: 0 },
				{ title: '我的', img: my, img1: my_on, select: 0 }
			],
			titleList: [
				{ ttle: '推荐', select: 1 },
				{ ttle: '视频', select: 0 },
				{ ttle: '热点', select: 0 },
				{ ttle: '历史', select: 0 }
			]
		}
	}
}
</script>

<style>
html {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
		sans-serif;
	font-size: 16px;
	word-spacing: 1px;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.middle {
	position: absolute;
	top: 3rem;
  left: 0;
  right: 0;
  bottom: 3.5rem;

}
</style>
